<script setup lang='ts'>
interface Props {
  password: string
}
defineOptions({
  name: 'BasePasswordVerify',
})
const props = withDefaults(defineProps<Props>(), {
  password: '',
})
const emit = defineEmits(['borderColor'])

/** 包含大小写字母 */
const upperLowerRegOk = computed(() => upperLowerReg.test(props.password))
/** 包含数字 */
const lastOneNumberRegOk = computed(() => lastOneNumberReg.test(props.password))
/** 长度至少8个字符 */
const lengthOk = computed(() => props.password.length >= 8)
const level = computed(() => [upperLowerRegOk.value, lastOneNumberRegOk.value, lengthOk.value].filter(a => !!a).length)
const levelText = computed(() => {
  switch (level.value) {
    case 0:
      return $t('weak')
    case 1:
      return $t('weak')
    case 2:
      return $t('middle')
    case 3:
      return $t('strong')

    default:
      return '-'
  }
})

watch(() => level.value, (n) => {
    if(level.value > 2){
        emit('borderColor', '#24EE89')
        return
    }
    if(level.value > 1){
        emit('borderColor', '#FF9820')
        return
    }
    emit('borderColor', '#FC3C3C')
})
</script>

<template>

  <div class="w-full flex items-center">
    <div class="flex w-[12.5rem] items-center">
      <div class=" h-1 mr-1 grow rounded-[28px]" :class="[level > 2 ? ' color-green' : level > 1 ? ' color-warn' : 'color-error']" />
      <div class=" h-1 mr-1 grow rounded-[28px]" :class="[level > 2 ? ' color-green' : level > 1 ? ' color-warn' : '']" />
      <div class=" h-1 grow rounded-[28px]" :class="[level > 2 ? ' color-green' : '']" />
    </div>
    <span
      class="inline-block whitespace-nowrap text-xs ml-auto font-medium"
      :class="[level > 2 ? 'text-[var(--tg-text-green)]' : level > 1 ? 'text-[var(--tg-text-warn)]' : 'text-[var(--tg-text-error)]']"
    >
      {{ levelText }}
    </span>
  </div>
</template>

<style>
:root{
  --tg-normal-bg: #323738;
  --tg-text-error: #FC3C3C;
  --tg-text-green: #24EE89;
  --tg-text-warn:#FF9820;
}

</style>

<style lang='scss' scoped>
.theme-normal{
  background-color: var(--tg-secondary-main);
}
.color-green{
  background-color: var(--tg-text-green);
}
.color-warn{
  background-color: var(--tg-text-warn);
}
.color-error{
  background-color: var(--tg-text-error);
}
</style>
